<template>
  <div class="top-navbar">
    <div class="navbar-content">
      <!-- 左侧logo和商店名称 -->
      <div class="navbar-left">
        <div class="logo-area">
          <img src="/maomao.png" alt="猫咖商店" class="logo">
          <div class="logo-text">猫咖商店</div>
        </div>
      </div>

      <!-- 右侧用户操作区域 -->
      <div class="navbar-right">
        <div class="user-actions">
          <button v-if="isLoggedIn" class="nav-btn my-btn" @click="goToUserInfo">我的</button>
          <button v-else class="nav-btn login-btn" @click="goToLogin">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopNavbar',
  data() {
    return {
      isLoggedIn: false
    }
  },
  mounted() {
    this.checkLoginStatus();
    // 监听存储变化，实时更新登录状态
    window.addEventListener('storage', this.checkLoginStatus);
    // 监听路由变化，确保页面切换时登录状态正确更新
    this.$router.afterEach(() => {
      this.checkLoginStatus();
    });
  },
  beforeUnmount() {
    window.removeEventListener('storage', this.checkLoginStatus);
    // 清理路由监听器
    if (this.$router && this.$router.afterHooks) {
      // Vue Router 3.x 清理方式
      const index = this.$router.afterHooks.findIndex(hook => hook === this.checkLoginStatus);
      if (index > -1) {
        this.$router.afterHooks.splice(index, 1);
      }
    }
  },
  methods: {
    checkLoginStatus() {
      // 检查userToken和userRoles来判断登录状态
      const userToken = localStorage.getItem('userToken');
      const userRoles = localStorage.getItem('userRoles');
      
      // 只有当token存在且roles存在时才认为已登录
      this.isLoggedIn = !!(userToken && userRoles);
      
      // 额外验证：如果有roles，检查是否包含有效的角色信息
      if (this.isLoggedIn && userRoles) {
        try {
          const roles = JSON.parse(userRoles);
          this.isLoggedIn = Array.isArray(roles) && roles.length > 0;
        } catch (error) {
          console.error('解析userRoles失败:', error);
          this.isLoggedIn = false;
        }
      }
    },
    goToUserInfo() {
      this.$router.push('/user-info');
    },
    goToLogin() {
      // 确保在跳转到登录页前清除可能存在的旧登录状态
      localStorage.removeItem('userRoles');
      localStorage.removeItem('userToken');
      localStorage.removeItem('userInfo'); // 保留这个以防有遗留数据
      this.checkLoginStatus();
      this.$router.push('/customer-login');
    }
  }
}
</script>

<style scoped>
.top-navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 50px;
  background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 900;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-content {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.navbar-left {
  display: flex;
  align-items: center;
}

.logo-area {
  display: flex;
  align-items: center;
}

.logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  margin-right: 8px;
}

.logo-text {
  font-size: 16px;
  font-weight: bold;
  color: white;
  white-space: nowrap;
}

.navbar-right {
  display: flex;
  align-items: center;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-btn {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.my-btn {
  background: rgba(102, 126, 234, 0.2);
  color: white;
  border-color: #667eea;
}

.my-btn:hover {
  background: rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
}

.login-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .top-navbar {
    left: 0;
  }
}
</style>
